<template>
  <div class="about">
    <van-nav-bar
      :title="index?'编辑':'添加'"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 公司名称 -->
        <van-field
          v-model="form.name"
          name="公司名称"
          label="公司名称"
          placeholder="公司名称"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- 职位 -->
         <van-field
          v-model="form.work"
          name="职位"
          label="职位"
          placeholder="职位"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- 公司logo -->
        <van-field name="uploader" label="公司logo" max-count="1">
          <template #input>
            <van-uploader v-model="form.logo" />
          </template>
        </van-field>
        <!-- 最低薪资 -->
        <van-field
          v-model="form.lowMoney"
          name="最低薪资"
          label="最低薪资"
          type="digit"
          placeholder="最低薪资"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- 最高工资 -->
        <!-- type='digit'  只能输入整数 -->
        <van-field
          v-model="form.higMoney"
          name="最高薪资"
          label="最高薪资"
          type="digit"
          placeholder="最高薪资"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- 年龄 -->
        <van-field name="slider" label="年龄">
          <template #input>
            <van-slider v-model="form.age" range max="80" min="18">
              <!-- 左边插槽 -->
              <template #left-button>
                <div class="van-slider__button">
                  {{ form.age[0] }}
                </div>
              </template>
              <!-- 右边插槽 -->
              <template #right-button>
                <div class="van-slider__button">
                  {{ form.age[1] }}
                </div>
              </template>
            </van-slider>
          </template>
        </van-field>
        <!-- 工龄 -->
        <van-field name="slider" label="工龄">
          <template #input>
            <van-slider v-model="form.years" range max="20" min="0">
              <!-- 左边插槽 -->
              <template #left-button>
                <div class="van-slider__button">
                  {{ form.years[0] }}
                </div>
              </template>
              <!-- 右边插槽 -->
              <template #right-button>
                <div class="van-slider__button">
                  {{ form.years[1] }}
                </div>
              </template>
            </van-slider>
          </template>
        </van-field>
        <!-- 城市选择 -->
        <van-field
          v-model="form.area"
          is-link
          readonly
          
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <!-- 城市选择弹出框 -->
        <van-popup v-model:show="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <!-- 详细地址 -->
        <van-field
          v-model="form.address"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <!-- 单选框 -->
        <van-field name="radio" label="设置置顶">
        <template #input>
            <van-radio-group v-model="form.checked" direction="horizontal">
            <van-radio name="1">单选框 1</van-radio>
            <van-radio name="2">单选框 2</van-radio>
            </van-radio-group>
        </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          {{index?'编辑职位':'添加职位'}}
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
// 省市区的插件
import { areaList } from "@vant/area-data";
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'

export default {
  setup(props) {
    const route = useRoute()
    // 获取url上的参数
    const index= route.query.index
    const data = reactive({
      form: {
        name: "", //公司名称
        logo: [],
        higMoney: "",
        lowMoney: "",
        age: [19, 43],
        years: [1, 6],
        area:'',
        address:'',
        checked:'1',//1就是是 2就是否
        work:''
      },
      showArea:false,//弹出框的状态
    });
    const {commit,state} = useStore()
    const router = useRouter()


    // 回显数据
    // if(index){
    //     data.form = state.list[index]
    // }
    // 如果index存在就是编辑  回显内容
    index && (data.form = state.list[index])
    // 点击弹出框的完成触发
    const onConfirm=(val)=>{
        console.log(val);
        data.form.area = val.map(item=>item.name).join('/')
        // 关闭弹出框
        data.showArea = false
        

    }
    // 点击提交
    const onSubmit = ()=>{

        if(index){
            // 编辑
            commit('edit',{index,form:data.form})
            router.back()
        }else{
            // 添加
             commit('add',data.form)
            router.back()
        }
       

    }
    return { ...toRefs(data), areaList ,onConfirm,onSubmit,index};
  },
};
</script>
